<script setup>
import { ref } from 'vue'
import { onLaunch, onShow, onLoad } from '@dcloudio/uni-app'
//引入API
import { postAddressAPI } from '@/api/address.js'
//引入子组件

//引入props

//引入store

//请求数据初始化页面
const address = ref({
  // 原代码已正确定义，无需修改，保留
  receiver: '',
  contact: '',
  address: '',
  isDefault: false,
  provinceCode: '110000',
  cityCode: '110100',
  countyCode: '110101',
})
//提交表单
const submitForm = async () => {
  // 原代码已正确定义，无需修改，保留

  uni.showToast({
    title: '接口崩了，做不了。',
    icon: 'success',
  })
}
</script>

<template>
  <view>
    <form @submit="submitForm">
      <view class="form-item">
        <text>收货人电话</text>
        <input
          v-model="address.contact"
          type="number"
          placeholder="请输入收货人电话"
        />
      </view>
      <view class="form-item">
        <text>收货人姓名</text>
        <input
          v-model="address.receiver"
          type="text"
          placeholder="请输入收货人姓名"
        />
      </view>
      <view class="form-item">
        <text>详细地址</text>
        <textarea v-model="address.address" placeholder="请输入详细地址" />
      </view>
      <view class="form-item">
        <checkbox v-model="address.isDefault">是否设置默认地址</checkbox>
      </view>
      <button form-type="submit">提交</button>
    </form>
  </view>
</template>

<style lang="scss">
.view {
  padding: 20px;
}
.form-item {
  margin-bottom: 20px;
}
.form-item text {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
.checkbox {
  margin-top: 10px;
}
</style>
